<template>
	<div class="wrap">
		<div class="searchDiv">
			<div class="h1Div"></div>
			<div class="Div2">
				<div class="Div2Input">
					<input type="text" placeholder="请输入关键字搜索">
					<i class="iconfont icon-changyongtubiao_yonghusousuo"></i>
				</div>
				<div class="Div2Text">热门：<span>奇异果</span><span>牛排</span><span>山竹</span><span>牛油果</span></div>
			</div>
			<router-link to="/myself" class="myself"><i class="iconfont icon-gerenzhongxin"></i><span>个人中心</span></router-link>
			<router-link to="/gwc" class="myself"><i class="iconfont icon-gouwuche"></i><span>购物车</span></router-link>
		</div>
		<div class="searchNav">
			<div class="searchNavLi" @mouseover="mouseOver">全部分类<i class="iconfont icon-jiantou-copy-copy"></i>
				<div class="searchNavLi-lef" v-show="isshow ==1" @mouseleave="mouseLeave">
					<div :class="{foodhover:hoverActive==1}" @mouseover="bgchange(1)"><i class="iconfont icon-xingxiansg"></i>新鲜水果</div>
					<div :class="{foodhover:hoverActive==2}" @mouseover="bgchange(2)"><i class="iconfont icon-haixian"></i>生猛海鲜</div>
					<div :class="{foodhover:hoverActive==3}" @mouseover="bgchange(3)"><i class="iconfont icon--roulei"></i>肉类家禽</div>
					<div :class="{foodhover:hoverActive==4}" @mouseover="bgchange(4)"><i class="iconfont icon-niunaiping"></i>蛋奶素食</div>
					<div :class="{foodhover:hoverActive==5}" @mouseover="bgchange(5)"><i class="iconfont icon-huluobu"></i>田园蔬菜</div>
					<div :class="{foodhover:hoverActive==6}" @mouseover="bgchange(6)"><i class="iconfont icon-xiaodianxin"></i>零食酒水</div>
					<div :class="{foodhover:hoverActive==7}" @mouseover="bgchange(7)"><i class="iconfont icon-liangyouganhuo"></i>粮油杂货</div>
					<div :class="{foodhover:hoverActive==8}" @mouseover="bgchange(8)"><i class="iconfont icon-liping"></i>礼品卡卷</div>
					<div :class="{foodhover:hoverActive==9}" @mouseover="bgchange(9)"><i class="iconfont icon-jiaju"></i>家具用品</div>
				</div>
				<div class="searchNavLi-right" v-show="isshow ==1" @mouseleave="mouseLeave">
					<div>
						<span class="fruit">应季鲜果</span>
						<span class="fruittype">
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
						</span>
					</div>
					<div>
						<span class="fruit">应季鲜果</span>
						<span class="fruittype">
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
						</span>
					</div>
					<div>
						<span class="fruit">应季鲜果</span>
						<span class="fruittype">
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
						</span>
					</div>
					<div>
						<span class="fruit">应季鲜果</span>
						<span class="fruittype">
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
						</span>
					</div>
					<div>
						<span class="fruit">应季鲜果</span>
						<span class="fruittype">
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
							<span class="fruittypewrap">
								<span>草莓</span>
								<span>葡萄</span>
								<span>香蕉</span>
								<span>苹果</span>
							</span>
						</span>
					</div>
				</div>
			</div>
			<router-link to="/firstindex">首页</router-link>
			<router-link to="###">同城</router-link>
			<router-link to="/Lbwxq">礼拜五</router-link>
			<router-link to="###">积分商城</router-link>
			<router-link to="###" class="searchNavSix">导航+</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{isshow:'2',hoverActive:''}
		},
		methods:{
			mouseOver(){
				this.isshow=1;
			},
			mouseLeave(){
				this.isshow=2
			},
			bgchange(number){
				this.hoverActive=number
			},
		}
	}
</script>

<style>
	.wrap{
		height: 180px;
	}
	.searchDiv{
		width: 66.7%;
		height: 130px;
		margin: auto;
	}
	
	.h1Div{
		width: 29.065%;
		height: 70px;
		background: url("../../public/images/logo-1.png") no-repeat;
		background-size: 100%;
		margin-top: 25px;
		float: left;
	}
	.Div2{
		margin-left: 8.5%;
		width: 26.1%;
		margin-top: 49px;
		float: left;
	}
	.Div2Input{
		width: 100%;
		height: 42px;
	}
	input{
		float: left;
		width: 78%;
		height: 36px;
		border: 2px solid #4b943d;
		outline: none;
	}
	.Div2 i{
		float: left;
		width: 40px;
		height: 40px;
		background:#4b943d ;
		color: white;
		font-size: 40px;
		text-align: center;
		cursor: pointer;
	}
	.Div2Text{
		width: 100%;
		font-size: 14px;
		color: #a3a3a3;
	}
	.Div2Text span{
		margin-left: 10px;
	}
	.myself{
		width: 9.7%;
		height: 38px;
		line-height: 38px;
		border: 1px solid #e5e5e5;
		background: #f8f8f6;
		text-align: center;
		margin-top: 50px;
		margin-left:20px;
		cursor: pointer;
		float: left;
	}
	.myself i{
		margin-right:5px;
	}
	.myself div{
		font-size: 14px;
	}
	.searchNav{
		width: 66.7%;
		height: 50px;
		margin: auto;
	}
	.searchNav a,.searchNav div{
		float: left;
		width: 13.2%;
		height: 20px;
		text-align: center;
		margin-top:15px ;
		border-right:1px solid #c1c1c1 ;
		color: #000000;
	}
	.searchNavLi{
		position: relative;
	}
	.searchNavLi i{
		margin-left: 5px;
	}
	.searchNav .searchNavSix{
		border: none;
	}
	.searchNavLi .searchNavLi-lef{
		position: absolute;
		left: 0px;
		top: 35px;
		z-index: 5;
		width: 100%;
		height: 500px;
		background: white;
		margin-top: 0px;
	}
	.searchNav .searchNavLi-right{
		position: absolute;
		left:100.5% ;
		top: 35px;
		background: #ebffe7;
		margin-top: 0px;
		z-index: 5;
		width: 460px;
		height: 500px;
	}
	.searchNavLi i{
		margin-right:5% ;
		color: #f08200;
	}
	.searchNavLi .searchNavLi-lef div{
		width: 100%;
		text-align: center;
		height: 54.5px;
		line-height: 54.5px;
		border: 1px solid #c1c1c1;
		border-top: 0px;
		margin-top: 0px;
	}
	.searchNavLi .lastLi{
		border: none;
	}
	.searchNavLi-right div{
		width: 100%;
		height: 16.66%;
	}
	.searchNavLi-right .fruit{
		float: left;
		width: 124px;
		height: 100%;
		color: #97c090;
	}
	.fruittype{
		float: left;
		width: 336px;
		height: 100%;
	}
	.fruittypewrap{
		float: left;
		width: 100%;
		height: 16px;
		margin-bottom: 20px;
	}
	.fruittypewrap span{
		float: left;
		width: 78px;
		height: 16px;
		border-left: 1px solid #c1c1c1;
		border-right: 1px solid #c1c1c1;
		text-align: center;
	}
	.fruittypewrap span:nth-of-type(1){
		border-left: none;
	}
	.fruittypewrap span:nth-of-type(4){
		border-right: none;
	}
	.foodhover{
		background: #ebffe7;
		border-right: none;
	}
	.searchNav a.router-link-active{
		color: #3fce2c;
		background: orange;
		/* text-decoration:underline; */
	}
</style>
